<template>
    <div class="borer">
      <!-- 增删列表 -->
          <ul>
            <li v-for="(item,index) in heros" :key="index" :class="{'A':'red','B':'blue','C':'green','D':'pink'}[item.score]">
                {{item.name}},{{item.score}}
                <button @click="del(index)">删除</button>
            </li>
          </ul>
          英雄姓名: <input type="text" v-model="name">  <br>
          英雄属性: <input type="text" v-model="score">
          <button @click="addHero">添加人物</button>
    </div>
</template>

<script type="text/ecmascript-6">
 export default{
        data(){
          return {
            name:'',
            score:'',
            heros:[
              {
                id:1,
                name:'成吉思汗',
                score:'A'
              },{
                id:2,
                name:'嬴政',
                score:'B',
              },{
                id:3,
                name:'李世民',
                score:'C',
              },{
                id:4,
                name:'拿破仑',
                score:'D',
              }
            ]
          }
        },
        methods:{
          addHero(){
              this.heros.push({
                  name:this.name,
                  score:this.score
              });
              this.name='';
              this.score=''
          },
          del(index){
            this.heros.splice(index,1)
          }
        }
 }
</script>
<style lang="stylus" rel="stylesheet/stylus" >
  ul,li
    list-style none
  .red
    background red
  .green
    background yellowgreen
  .blue
    background skyblue
  .pink
    background hotpink
  
      
</style>


